<!-- <template>
    <div class="chat-detail-container">
        <div class="chat-header">
            <h2>{{ chatTitle }}</h2>
            <p>{{ chatStartTime }}</p>
        </div>
        <div v-if="isLoading" class="loading">加载中...</div>
        <div v-if="error" class="error">{{ error }}</div>
        <div v-if="chatMessages.length === 0 && !isLoading && !error" class="no-messages">暂无聊天记录</div>
        <div v-else class="chat-messages">
            <div v-for="(message, index) in chatMessages" :key="index" class="chat-message">
                <div class="message-sender">{{ message.senderType }}</div>
                <div class="message-sender">{{ message.title }}</div>
                <div class="message-content">{{ message.content }}</div>
                <div class="message-content">{{ message.image }}</div>
                <div class="message-time">{{ message.sendTime }}</div>
                <div class="message-time">{{ message.startTime }}</div>
            </div>
        </div>
    </div>
</template> -->
<template>
    <div class="chat-detail-container">
        <div class="chat-header">
            <h2>{{ chatTitle }}</h2>
            <p>{{ chatStartTime }}</p>
        </div>
        <div v-if="isLoading" class="loading">加载中...</div>
        <div v-if="error" class="error">{{ error }}</div>
        <div v-if="chatMessages?.length === 0 && !isLoading && !error" class="no-messages">暂无聊天记录</div>
        <div v-else class="chat-messages">
            <div v-for="(message, index) in chatMessages" :key="index" class="chat-message">
                <div class="message-sender">{{ message.senderType }}</div>
                <div class="message-content">{{ message.content }}</div>
                <div class="message-time">{{ message.sendTime }}</div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router';

// 定义消息类型
// 定义消息类型
interface Message {
    messageId: number;
    conversationId: number;
    senderType: string;
    content: string;
    sendTime: string;
}

// 定义聊天记录详细信息类型
interface ChatDetail {
    messages: Message[];
}

// 定义聊天记录详细信息类型
// interface ChatDetail {
//     title: string;
//     startTime: string;
//     messages: Message[];
// }

const route = useRoute();
const chatTitle = ref('');
const chatStartTime = ref('');
const chatMessages = ref<Message[]>([]);
const isLoading = ref(false);
const error = ref('');

// 获取聊天记录详细信息的函数
const fetchChatDetail = async () => {
    isLoading.value = true;
    error.value = '';
    try {
        const conversationId = route.query.id as string;
        const response = await apiClient.get(`/dialogue/dialogue/getConversationDetail/${conversationId}`);
        const data: ChatDetail = response.data;
        // 直接使用获取到的消息列表
        chatMessages.value = data.messages || []; // 确保 chatMessages 被赋值
    } catch (error) {
        console.error('Error fetching chat detail:', error);
        error.value = '聊天记录详细信息获取失败';
        chatMessages.value = []; // 出错时也确保 chatMessages 被赋值
    } finally {
        isLoading.value = false;
    }
};
// const fetchChatDetail = async () => {
//     isLoading.value = true;
//     error.value = '';
//     try {
//         const conversationId = route.query.id as string;
//         const response = await apiClient.get(`/dialogue/dialogue/getConversationDetail/${conversationId}`);
//         const data: ChatDetail = response.data;
//         chatTitle.value = data.title;
//         chatStartTime.value = data.startTime;
//         // 确保 chatMessages 有值后再进行后续操作
//         if (data.messages) {
//             chatMessages.value = data.messages;
//         } else {
//             chatMessages.value = [];
//         }
//     } catch (error) {
//         console.error('Error fetching chat detail:', error);
//         error.value = '聊天记录详细信息获取失败';
//     } finally {
//         isLoading.value = false;
//     }
// };
// 创建 axios 实例
const apiClient = axios.create({
    baseURL: '/api',
});
apiClient.interceptors.request.use(
    config => {
        if (Token) {
            config.headers['Token'] = `${Token}`;
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);
// 添加响应拦截器
apiClient.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        console.error('请求失败:', error);
        throw error;
    }
);
// 定义 Token 类型为 string | null
let Token: string | null = "";

const getToken = () => {
    Token = sessionStorage.getItem("phone") || ""; // 如果获取不到则赋值为空字符串
}
onMounted(() => {
    fetchChatDetail();
    getToken();
});
</script>

<style scoped>
.chat-detail-container {
    padding: 20px;
}

.chat-header {
    margin-bottom: 20px;
}

.chat-header h2 {
    margin: 0;
    font-size: 20px;
}

.chat-header p {
    margin: 5px 0;
    font-size: 14px;
    color: #666;
}

.chat-messages {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    max-height: 400px;
    overflow-y: scroll;
}

.chat-message {
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 5px;
}

.chat-message:nth-child(even) {
    background-color: #f8f8f8;
}

.message-sender {
    font-weight: bold;
    margin-bottom: 5px;
}

.message-content {
    margin-bottom: 5px;
}

.message-time {
    font-size: 12px;
    color: #999;
}

.loading {
    text-align: center;
    color: #999;
    margin-bottom: 20px;
}

.error {
    color: red;
    text-align: center;
    margin-bottom: 20px;
}

.no-messages {
    color: #999;
    text-align: center;
}
</style>